<div class="element-cards page-layout card fullwidth">
    <div class="header center">
        <h1 class="mt-16">BASE</h1>
    </div>
    <div class="content center" fxLayout="row wrap" fxLayoutAlign="space-between start">
        <div class="content-area pb-12" fxLayout="column nowrap" fxFlex="32">
            <h3>STANDARD</h3>
            <mat-card>
                <img mat-card-image src="https://i.pinimg.com/564x/47/78/0c/47780c5a6da8d770281bce2b7da07947.jpg">
                <mat-card-title>Card Title</mat-card-title>
                <mat-card-content>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    </p>
                </mat-card-content>
                <mat-divider></mat-divider>
                <mat-card-actions>
                    <button mat-raised-button color="accent">Button</button>
                </mat-card-actions>
            </mat-card>
        </div>
        <div class="content-area" fxLayout="column nowrap" fxFlex="32">
            <h3>IMAGE CAPS BOTTOM</h3>
            <mat-card class="pb-0">
                <mat-card-header>
                    <img mat-card-avatar src="https://i.pinimg.com/75x75_RS/74/47/ed/7447ed4fbc073f7c1951fed2d75e7848.jpg">
                    <mat-card-title>Nick Name</mat-card-title>
                    <mat-card-subtitle>More like this.</mat-card-subtitle>
                </mat-card-header>
                <img mat-card-image src="https://i.pinimg.com/564x/6c/0b/60/6c0b60c34b9c6a7968777d7ed1cefafd.jpg">
            </mat-card>
        </div>
        <div class="content-area" fxLayout="column nowrap" fxFlex="32">
            <h3>IMAGE CAPS TOP</h3>
            <mat-card>
                <img mat-card-image src="https://i.pinimg.com/564x/ca/46/c7/ca46c73794059ce4e1fddf34798572fd.jpg">
                <mat-card-footer>
                    <div class="p-12">
                        This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis ullamco laboris nisi ut aliquip ex ea commodo consequat.

                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

                        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

                        Last updated 3 mins ago
                    </div>
                </mat-card-footer>
            </mat-card>
        </div>
        <div class="content-area pb-12" fxLayout="column nowrap" fxFlex="32">
            <h3>INVERTED TEXT</h3>
            <mat-card>
                <mat-card-title>Lorem ipsum dolor sit amet</mat-card-title>
                <mat-card-content>
                    <p>
                        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum, molestias! Inventore dolore, perferendis corporis?Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                    </p>
                </mat-card-content>
                <mat-card-actions align="end">
                    <button mat-button color="accent">Card Link</button>
                    <button mat-button color="accent">Another Link</button>
                </mat-card-actions>
            </mat-card>
        </div>
        <div class="content-area" fxLayout="column nowrap" fxFlex="32">
            <h3>TITLE GROUP</h3>
            <mat-card>
                <mat-card-title-group>
                    <mat-card-title>Lorem ipsum dolor sit amet</mat-card-title>
                    <mat-card-subtitle>Some quick example text to build on the card subtitle.</mat-card-subtitle>
                    <img mat-card-md-image src="https://i.pinimg.com/564x/f2/0b/de/f20bdeae779589968ea4989c183f766e.jpg">
                </mat-card-title-group>
                <mat-card-content>
                    <p>
                        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum, molestias! Inventore dolore, perferendis corporis?Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                    </p>
                </mat-card-content>
            </mat-card>
        </div>
        <div class="content-area" fxLayout="column nowrap" fxFlex="32">
            <h3>LIST</h3>
            <mat-card>
                <mat-card-content>
                    <div class="card-content-list p-16" fxLayout="column nowrap" fxLayoutAlign="start start" fxLayoutGap="15px">
                        <div class="card-content-list-item">Cras justo odio</div>
                        <div class="card-content-list-item">Dapibus ac facilisis in</div>
                        <div class="card-content-list-item">Vestibulum at eros</div>
                    </div>
                </mat-card-content>
                <mat-card-actions align="end">
                    <button mat-button color="accent">Card Link</button>
                    <button mat-button color="accent">Another Link</button>
                </mat-card-actions>
            </mat-card>
        </div>
    </div>
    <div class="header center">
        <h1 class="mt-16">EXTRA</h1>
    </div>
    <div class="content center" fxLayout="row nowarp" fxLayoutAlign="space-between start">
        <div class="content-area pb-12" fxLayout="column nowrap" fxLayoutGap="30px" fxFlex="49">
            <h3>HEADER AND FOOTER</h3>
            <mat-card>
                <mat-card-header>
                    <mat-card-title>Featured</mat-card-title>
                </mat-card-header>
                <mat-divider></mat-divider>
                <mat-card-content>
                    <h2 class="mt-12">Lorem ipsum dolor sit amet</h2>
                    <p>
                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </p>
                    <button mat-raised-button color="primary">Go somewhere</button>
                </mat-card-content>
            </mat-card>
            <mat-card>
                <mat-card-content>
                    <h2 class="mt-12">Lorem ipsum dolor sit amet</h2>
                    <p>
                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </p>
                    <button mat-raised-button color="primary">Go somewhere</button>
                </mat-card-content>
                <mat-divider></mat-divider>
                <mat-card-footer class="pt-12">
                    <h2 class="m-16">Featured</h2>
                </mat-card-footer>
            </mat-card>
        </div>
        <div class="content-area pb-12" fxLayout="column nowrap" fxLayoutGap="30px" fxFlex="49">
            <h3>TEXT ALIGNMENT</h3>
            <mat-card>
                <mat-card-content fxLayout="column nowrap" fxLayoutAlign="start start">
                    <h2 class="mt-12">Lorem ipsum dolor sit amet</h2>
                    <p>
                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </p>
                    <button mat-raised-button color="primary">Go somewhere</button>
                </mat-card-content>
            </mat-card>
            <mat-card>
                <mat-card-content fxLayout="column nowrap" fxLayoutAlign="start center">
                    <h2 class="mt-12">Lorem ipsum dolor sit amet</h2>
                    <p>
                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </p>
                    <button mat-raised-button color="primary">Go somewhere</button>
                </mat-card-content>
            </mat-card>
            <mat-card>
                <mat-card-content fxLayout="column nowrap" fxLayoutAlign="start end">
                    <h2 class="mt-12">Lorem ipsum dolor sit amet</h2>
                    <p>
                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </p>
                    <button mat-raised-button color="primary">Go somewhere</button>
                </mat-card-content>
            </mat-card>
        </div>
    </div>
    <div class="header center">
        <h1 class="mt-16">VARIANTS</h1>
    </div>
    <div class="content center" fxLayout="column nowarp" fxLayoutAlign="space-between start">
        <h3>DECKS</h3>
        <div class="content-area" fxLayout="row nowrap" fxLayoutGap="30px">
            <mat-card fxFlex="1 0 0%" class="card-deck">
                <img mat-card-image src="https://i.pinimg.com/564x/b8/58/8b/b8588b18575e60c7897cc93a8d9f6d26.jpg">
                <mat-card-title>Card Title</mat-card-title>
                <mat-card-content>
                    <p>Excepteur sint occaecat cupidatat non laborum.</p>
                    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                    <p>Last updated 3 mins ago</p>
                </mat-card-content>
            </mat-card>
            <mat-card fxFlex="1 0 0%" class="card-deck">
                <img mat-card-image src="https://i.pinimg.com/564x/4c/51/d2/4c51d2dcbc1567cc4dd881da61c85a72.jpg">
                <mat-card-title>Card Title</mat-card-title>
                <mat-card-content>
                    <p>Excepteur sint occaecat cupidatat non laborum.</p>
                    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                    <p>Last updated 3 mins ago</p>
                </mat-card-content>
            </mat-card>
            <mat-card fxFlex="1 0 0%" class="card-deck">
                <img mat-card-image src="https://i.pinimg.com/564x/8b/aa/17/8baa176d30c99f6e18d37879ee729294.jpg">
                <mat-card-title>Card Title</mat-card-title>
                <mat-card-content>
                    <p>Excepteur sint occaecat cupidatat non laborum.</p>
                    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                    <p>Last updated 3 mins ago</p>
                </mat-card-content>
            </mat-card>
            <mat-card fxFlex="1 0 0%" class="card-deck">
                <img mat-card-image src="https://i.pinimg.com/564x/be/a1/ed/bea1edbd75df149edc64c65c5227459f.jpg">
                <mat-card-title>Card Title</mat-card-title>
                <mat-card-content>
                    <p>Excepteur sint occaecat cupidatat non laborum.</p>
                    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                    <p>Last updated 3 mins ago</p>
                </mat-card-content>
            </mat-card>
        </div>
    </div>
</div>
